<template>
  <div>
       <div class="title">
      <ul>
        <li @click="GetBack">
          <img src="../../assets/images/goback.png" alt="" />
        </li>
        <li>我的订单</li>
        <li>共5件</li>
      </ul>
    </div>
     <!-- 订单数量 -->
    <div class='my-order'>
      <div><img src="../../assets/banner.jpg" alt="" /></div>
      <div>
        <div>Gelartist底胶免洗磨砂封层擦洗封层加固胶美甲功能胶甲</div>
        <div> ×1</div>
        <div>颜色：055</div>
        <div>￥364</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'MyOrder',
   methods: {
    GetBack() {
      this.$router.push("/LineItem");
    },
  },

}
</script>

<style scoped>
.title {
  width: 100%;
  height: 50px;
  background-color: white;
}
ul {
  width: 100%;
}
ul li {
  float: left;
}

ul li:nth-child(1) {
  width: 19px;
  margin-left: 2%;
  margin-top: 3%;
  margin-bottom: 5%;
}
ul li:nth-child(2) {
  margin-left: 35%;

  font-size: 19px;

  line-height: 50px;
}
ul li:nth-child(3) {
  float: right;
  line-height: 50px;
  margin-right: 2%;
  font-size: 17px;
}
.my-order{
  width:100%;
  height:108px;
  background-color:white;
  margin-top:10px;
    border-bottom: 1px solid #dcdcdc;
}
.my-order div:nth-child(1) img{
  width:84px;
  height:84px;
  margin-left: 11px;
 padding-top:12px;
 float: left;

}
.my-order div:nth-child(2){
  float: right;
 width:70%;
 
}
.my-order div:nth-child(2) div:nth-child(1){
  margin-top:11px;
  width:210px;
  margin-left: px;
  font-size:14px;
  
}
.my-order div:nth-child(2) div:nth-child(2){
 width:24px;
 margin-top:-13%
 
}
.my-order div:nth-child(2) div:nth-child(3) {
  margin-top:9%;
 color: 	#A9A9A9;
float: left;


}
.my-order div:nth-child(2) div:nth-child(4){
  float: right;
  margin-top:9%;
  margin-right:3%;
  color:red;
  font-size:14px
}

</style>